/*
  学习目标：生命周期-挂载阶段
  1. constructor
  2. render
  3. componentDidMount

*/

import React, { Component } from 'react';

export default class App extends Component {
  // 代表创建时:  类似vue中的 created
  // 场景: 💥负责声明state  ref等
  // 注意: 早期写法, 👎现在几乎不用
  constructor() {
    // super是关键字, 在构造函数中, 必须调用
    // 作用: 继承爸爸所有的属性和方法
    super();
    console.log('constructor  ----->  ');
    this.state = {
      msg: 'hello React',
      count: 100,
    };

    this.iptRef = React.createRef();
  }

  // 代表渲染
  render() {
    console.log('render  ----->  ');
    return (
      <div>
        App - {this.state.count} - {this.state.msg}
      </div>
    );
  }

  // 代表挂载后: 类似vue中的mounted
  // 场景: 💥 1. 发请求  2. 最先获取dom  3. 绑定事件等
  componentDidMount() {
    console.log('componentDidMount  ----->  ');
  }
}
